<template>
	<view class="home">
		<custom-navbar title="活动报名" :show-back="true" @back="handleBack" />

		<view class="content pb150" :style="{ paddingTop: navBarHeight + 'px' }">
			<view class="w100 p2030">
				<view class="top p4030 fcols mb20">
					<view class="f30bc0">高新技术企业研讨会</view>
					<view class="fc">
						<image class="wh30" src="/static/images/activity/时间.svg"></image>
						<view class="f245c3 ml10">活动时间：2024-02-03 9:00至2024-02-03 12:00</view>
					</view>
				</view>

				<view class="formdata p0030">
					<up-form labelcompany_position="left" :model="formData" :rules="rules" ref="formRef">
						<up-form-item label="真实姓名" prop="member_name" :borderBottom="true" :required="true"
							labelWidth="180">
							<up-input v-model="formData.member_name" placeholder="请输入真实姓名" border="none" clearable
								inputAlign="right"></up-input>
						</up-form-item>

						<up-form-item label="性别" prop="sex" :borderBottom="true" :required="true" labelWidth="180">
							<view class="radio-group-wrapper">
								<up-radio-group v-model="formData.sex" placement="row" @change="groupChange">
									<up-radio v-for="(item, index) in genderOptions" :key="index" :label="item.name"
										:name="item.value" :customStyle="{
						          marginLeft: index > 0 ? '40rpx' : '0',
						          marginBottom: '0'
						        }"></up-radio>
								</up-radio-group>
							</view>
						</up-form-item>

						<up-form-item label="手机号" prop="phone_number" :borderBottom="true" :required="true"
							labelWidth="180">
							<up-input v-model="formData.phone_number" placeholder="请输入手机号" border="none" clearable
								inputAlign="right" type="number" maxlength="11"></up-input>
						</up-form-item>

						<up-form-item label="公司名称" prop="company_name" :borderBottom="true" :required="true"
							labelWidth="180">
							<up-input v-model="formData.company_name" placeholder="请输入公司名称" border="none" clearable
								inputAlign="right"></up-input>
						</up-form-item>

						<up-form-item label="公司职位" prop="company_position" :borderBottom="true" :required="true"
							labelWidth="180">
							<up-input v-model="formData.company_position" placeholder="请输入职位名称" border="none" clearable
								inputAlign="right"></up-input>
						</up-form-item>
					</up-form>
				</view>

				<up-button type="primary" text="提交报名信息" color="linear-gradient(90deg, #398DFB 0%, #61DBFF 100%)"
					:loading="submitting" @click="handleSubmit"></up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		getCurrentInstance
	} from 'vue'
	import {
		Signup
	} from '@/api/activity'
	import {
		useUserStore
	} from '@/stores/user'
	import CustomNavbar from '@/components/custom-navbar.vue'
	// 在组件中使用
	import {
		formatDateTime
	} from '@/utils/formatTime'

	// 获取全局cdn方法
	const {
		proxy
	} = getCurrentInstance()
	const cdn = (path) => proxy.$cdn + path
	const userStore = useUserStore()

	// 获取系统信息
	const systemInfo = uni.getSystemInfoSync()
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)

	// 表单数据
	const formRef = ref(null)
	const submitting = ref(false)
	const formData = ref({
		member_name: '',
		sex: '',
		phone_number: '',
		company_name: '',
		company_position: ''
	})

	// 性别选项
	const genderOptions = ref([{
			name: '先生',
			value: '1'
		},
		{
			name: '女士',
			value: '2'
		}
	])

	// 表单验证规则
	const rules = {
		member_name: [{
				required: true,
				message: '请输入真实姓名',
				trigger: 'blur'
			},
			{
				min: 2,
				max: 10,
				message: '姓名长度在2-10个字符之间',
				trigger: 'blur'
			}
		],
		sex: [{
			required: true,
			message: '请选择性别',
			trigger: 'change'
		}],
		phone_number: [{
				required: true,
				message: '请输入手机号',
				trigger: 'blur'
			},
			{
				validator: (rule, value, callback) => {
					if (!/^1[3-9]\d{9}$/.test(value)) {
						callback(new Error('请输入正确的手机号'))
					} else {
						callback()
					}
				},
				trigger: 'blur'
			}
		],
		company_name: [{
				required: true,
				message: '请输入公司名称',
				trigger: 'blur'
			},
			{
				min: 2,
				max: 50,
				message: '公司名称长度在2-50个字符之间',
				trigger: 'blur'
			}
		],
		company_position: [{
				required: true,
				message: '请输入职位名称',
				trigger: 'blur'
			},
			{
				min: 2,
				max: 20,
				message: '职位名称长度在2-20个字符之间',
				trigger: 'blur'
			}
		]
	}
	// 初始化
	// 获取路由参数
	const activityId = ref('')
	const activityDetail = ref({})
	onMounted(() => {
		// // 获取上个页面传递的参数
		// const eventChannel = getCurrentPages()[getCurrentPages().length - 1].getOpenerEventChannel()

		// // 监听acceptDataFromOpenerPage事件，获取数据
		// eventChannel.on('acceptDataFromOpenerPage', function(data) {
		// 	activityId.value = data.id
		// 	fetchActivityDetail()
		// })

		// 或者直接从当前页面路由参数获取
		setTimeout(() => {
			const pages = getCurrentPages()
			const currentPage = pages[pages.length - 1]
			const options = currentPage.options
			activityId.value = options.id

		}, 100)
	})
	const signupTime = formatDateTime(new Date())
	// 提交表单
	const handleSubmit = async () => {
		try {
			console.log(signupTime.value, '时间')
			submitting.value = true
			// 验证表单
			await formRef.value.validate()

			// 调用API提交数据
			const res = await Signup({
				activity_id: activityId.value, // 根据实际情况获取活动ID
				signup_time: signupTime,
				...formData.value
			})

			if (res.code === 200) {
				uni.showToast({
					title: '报名成功',
					icon: 'success'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			} else {
				throw new Error(res.message || '报名失败')
			}
		} catch (error) {
			uni.showToast({
				title: error.message,
				icon: 'none'
			})
		} finally {
			submitting.value = false
		}
	}

	// 返回上一页
	const handleBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		company_position: relative;
		background-color: #f5f5f5;

		.content {
			padding-top: var(--status-bar-height);
			padding-top: calc(var(--status-bar-height) + 44px);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.top {
				width: 100%;
				height: 170rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			}

			.formdata {
				width: 100%;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin-bottom: 40rpx;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

				.radio-group-wrapper {
					display: flex;
					justify-content: flex-end;
					width: 100%;
					padding-right: 20rpx; // 如果需要更靠右可以调整这个值

					::v-deep .u-radio-group {
						display: flex;
						flex-direction: row;
						align-items: center;
					}

					::v-deep .u-radio {
						display: flex;
						align-items: center;
					}

					::v-deep.u-radio-group {
						flex: none;
					}
				}
			}

			.u-button {
				margin-top: 40rpx;
				height: 88rpx;
				border-radius: 44rpx;
				font-size: 32rpx;
			}
		}
	}
</style>